<template>
  <gd-row style="display: flex; justify-content: center; align-items: center; width: 100%; height: 100%">
    <div class="biz-comp-lefttree-container" v-if="hasTree">
      <div class="label-conatiner" @click="onEnterNextSetup('biz-comp')">
        <el-tooltip effect="dark" content="点击编辑CRUD组件" placement="bottom">
          <div class="label-content">
            <gd-icon icon-name="edit"></gd-icon>
            左树组件
          </div>
        </el-tooltip>
      </div>
    </div>
    <gd-row
      style="flex-grow: 1; min-width: 0; word-break: break-all; height: 100%; display: flex; flex-direction: column"
    >
      <div class="biz-comp-sub-container slot top" :class="{ active: activeSlots.includes('top') }">
        <div class="label-conatiner">表格上方插槽</div>
      </div>
      <div class="biz-comp-sub-container" style="border-top: none; border-bottom: none; flex-grow: 1">
        <el-tooltip
          effect="dark"
          :content="`点击${activeSlots.includes('top') ? '移除' : '添加'}上方插槽`"
          placement="bottom"
        >
          <div class="top-add-container" @click="onClickSlot('top')">
            <gd-icon :icon-name="activeSlots.includes('top') ? 'minus' : 'plus'"></gd-icon>
          </div>
        </el-tooltip>
        <div class="label-conatiner" @click="onEnterNextSetup('biz-comp')">
          <el-tooltip effect="dark" content="点击编辑CRUD组件" placement="bottom">
            <div class="label-content">
              <gd-icon icon-name="edit" style="line-height: 100%"></gd-icon>
              {{ hasTree ? "右表组件" : "表格组件" }}
            </div>
          </el-tooltip>
        </div>
        <el-tooltip
          effect="dark"
          :content="`点击${activeSlots.includes('bottom') ? '移除' : '添加'}下方插槽`"
          placement="bottom"
        >
          <div class="bottom-add-container" @click="onClickSlot('bottom')">
            <gd-icon :icon-name="activeSlots.includes('bottom') ? 'minus' : 'plus'"></gd-icon>
          </div>
        </el-tooltip>
      </div>
      <div class="biz-comp-sub-container slot bottom" :class="{ active: activeSlots.includes('bottom') }">
        <div class="label-conatiner">表格下方插槽</div>
      </div>
    </gd-row>
  </gd-row>
</template>
<script setup>
  import { computed, ref, reactive } from "vue";
  import { useStore } from "@gd-accbuild-core/store/hackVueStore";
  const _store = useStore();
  const props = defineProps({
    layoutConfig: {
      type: Object,
    },
    templateIdx: {
      type: Number,
      require: true,
    },
  });
  const hasTree = computed(() => {
    return props.layoutConfig?.templateKey.endsWith("_filter");
  });
  const activeSlots = reactive([]);
  const onClickSlot = (val) => {
    console.log(val);
    const matchedIdx = activeSlots.findIndex((el) => el === val);
    if (matchedIdx >= 0) {
      activeSlots.splice(matchedIdx, 1);
    } else {
      activeSlots.push(val);
    }
  };
  const onEnterNextSetup = (val) => {
    console.log(_store.state.designerEngine.curActivedResource,props.templateIdx,val,'查看现有资源')
    _store.dispatch("designerEngine/setCurDragCompConfig_canvasRenderType", {
      canvasRenderType: val,
      bizTemplateIdx: props.templateIdx,
    });
  };
</script>
<style lang="scss" scoped>
  .biz-comp-lefttree-container {
    width: 230px;
    border: 0.5px dashed #006cff;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
  }

  .biz-comp-sub-container {
    width: 100%;
    border: 0.5px dashed #006cff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;

    .top-add-container,
    .bottom-add-container {
      height: 30px;
      line-height: 30px;
      width: 100%;
      cursor: pointer;
      border: 0.5px dashed #006cff;
    }

    .top-add-container {
      //border-top: none;
    }

    .bottom-add-container {
      //border-top: none;
    }
  }

  .label-conatiner {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .label-content {
      height: 25px;
      line-height: 25px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    &:hover {
      cursor: pointer;
      color: #409eff !important;
    }
  }

  .slot {
    height: calc(100px - 2px);
    display: none;

    &.active {
      display: block;
    }

    &.top.active {
      border-bottom: none;
    }

    &.bottom.active {
      border-top: none;
    }
  }
</style>
